<template>
  <div class="center">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>目录</span>
      </div>
      <div class="text item">
        <a href="javascript:;" @click="goto('/HelloWorld')" >Hello World</a>
      </div>
      <div class="text item">
        <a href="javascript:;" @click="goto('/AllScroll')" >MintUI无限滑动</a>
      </div>
      <div class="text item">
        <a href="javascript:;" @click="goto('/UploadPic')" >element-ui图片上传</a>
      </div>
      <div class="text item">
        <a href="javascript:;" @click="goto('/MinioUpload')" >element-ui + minio文件上传</a>
      </div>
      <div class="text item">
        <a href="javascript:;" @click="goto('/RichEditor')" >富文本编辑器</a>
      </div>
      <div class="text item">
        <a href="javascript:;" @click="goto('/EChartsDemo')" >EChartsDemo</a>
      </div>
    </el-card>
  </div>
</template>

<script>
// 使用 element-ui 导入样式
import 'element-ui/lib/theme-chalk/index.css'
export default {
  name: 'Main',
  methods: {
    // 路由跳转的方法
    goto (path) {
      this.$router.push(path)
    }
  }
}
</script>

<style>
  .center {
    display: block;
    text-align: -webkit-center;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>
